<template style="background-color: #f5f5f7;">
	<view class="background">
	    <view :class="[config.style]">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<view class="buy">
			<!--地址容器-->
			<view class="address-item">
				<view class="address-default" v-if="address" @click="goToAddressList">
					<view class="person-box">
						<text class="name">{{address.name}}</text>
						<text class="phone">{{address.phone}}</text>
					</view>
					<view class="address-box text-ellipsis">
						<text class="pos-province">{{address.pos_province}}</text>
						<text class="pos-city">{{address.pos_city}}</text>
						<text class="pos_district">{{address.pos_district}}</text>
						<text class="address">{{address.address}}</text>
					</view>
				</view>
				<view class="address-edit" v-else @click="goToAddressList">
					收货地址管理
				</view>
				<view class="active">
					<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
				</view>
			</view>
			
			<view class="goods-item">
				<view class="content">
					<view class="cover">
						<image mode="widthFix" :src="data.cover_400" @error="imageError" class="image"></image>
					</view>
					<view class="info">
						<view class="title text-ellipsis-2">{{data.title}}</view>
						<view class="exp-info">
							{{sku}}
						</view>
						<view class="price-info">
							<view class="score-icon">
								<text class="iconfont">&#xe641;</text>
							</view>
							<view class="price">
								<text class="pointback">{{data.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="goods-count">
				<view class="title">数量</view>
				<view class="info">
					<view class="number-box">
						<view class="a_minus cut-btn" @click="setQuantity('cut')">-</view>
						<view class="number-input">
							{{quantity}}
						</view>
						<view class="a_add add-btn" @click="setQuantity('add')">+</view>
					</view>
				</view>
			</view>
			
			<view class="goods-delivery">
				<view class="title">运费</view>
				<view class="info">
					<view class="value">
						包邮
					</view>
				</view>
			</view>
			
			<view class="remark">
				<view class="title">订单备注</view>
				<view class="info">
					<view class="uni-textarea">
						<textarea class="textarea" placeholder-style="color:#666; font-size:22rpx;" placeholder="选填,和商家协商一致后留言,最多100个字"/>
					</view>
				</view>
			</view>
		</view>

		<view class="clearArea"></view>
		<!--立即支付 底部导航-->
		<view class="pay-bar">
			<view class="amount">
				<text>应付积分</text> 
				<text class="total">{{paidFee}}</text> 
			</view>
			<button type="default" class="pay-btn" hover-class="pay-btn-hover" @click="sale()">提交订单</button>
		</view>
		
		<!--登录框-->
		<Login ref="login" :config="config" @getUserInfo="getUserInfo"/>
	</view>
    </view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	//全屏加载中
	import FullscreenLoading from '@/components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	 
	export default {
		
		components: {
			FullscreenLoading,
		},
		data() {
			return {
				loading: true, //加载中
				urlParams: {}, //url参数
				userInfo : {}, //用户数据
				/********以下商品相关数据********/
				data: {},
				inventory: 999, // 商品库存数量
				id: 0,
				sku: '',
				quantity: 1, //购买数量
				address: '', //默认收货地址
				deliveryFee: 0, // 运费
				paidFee: 0, //应付总金额
				remark: '', //买家留言
			}
		},
		async onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			await this.$onLaunched;
			this.urlParams = option
			this.id = option.id
			this.quantity = option.quantity
			this.sku = option.sku
			Promise.all([this.getAddressDefault(),this.getData()]).then(res => {
				//初始化总金额
				this.paid_fee();
				//加载完成
				this.loading = false
			})
			
		},
		created() {
			//获取已登录用户数据
			this.getUserInfo()
			//
		},
		onShow(){
			this.getAddressDefault()
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			
			/**
			 * 获取收货地址列表
			 */
			getAddressDefault: function(){
				let that = this
				let params = this.urlParams
				return new Promise((resolve, reject) => { 
					//获取首页数据
					let url = ''
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/address'
						//#endif
						//#ifdef H5
						url = 'entry/site/address'
						//#endif
					that.util.request({
						url : url,
						data : {
							action: 'default'
						},
						success: function (res) {
							
							if (res.data.code == 200) {
								that.address = res.data.data
							}
							resolve(res.data)   
							
						},
						fail:(err) => {
							reject(err)
						}
					})
				})
			},
			
			/**
			 * 进入地址管理页
			 */
			goToAddressList: function(){
				let url = '../my/address/lists'
				console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},
			
			/**
			 * 获取商品详情数据
			 */
			getData: function(){
				let that = this
				let params = this.urlParams
				return new Promise((resolve, reject) => { 
					let data = {}
						data.action = 'detail'
						data.id = params.id
					//获取数据
					let url = ''
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/goods'
						//#endif
						//#ifdef H5
						url = 'entry/site/goods'
						//#endif
					that.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.data = res.data.data
							}
							resolve(res.data)
						},
						fail:(err) => {
							reject(err)
						}
					}) 
				}) 
			},
			
			/**
			 * 增加或减少购买数量
			 */
			setQuantity: function(key){
				//减少
				if(key == 'cut'){
					if(this.quantity > 1){
						this.quantity = Number(this.quantity) - 1
					}else{
						this.quantity = 1
					}
				}
				
				//增加
				if(key == 'add'){
					if(this.quantity >= this.inventory){
						this.quantity = this.inventory
					}else{
						this.quantity = Number(this.quantity) + 1
					}
				}
				this.getDelivery()
			},
			
			//获取运费
			getDelivery: function (){
				let that = this
				let address_id = this.address.id; //收货地址ID
				let goods_id = this.id; //商品ID
				let quantity = this.quantity; //数量
				let data = {}
					data.action = 'delivery'
					data.goods_id = goods_id
					data.address_id = address_id
					data.quantity = quantity
				//获取数据
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/orders'
					//#endif
					//#ifdef H5
					url = 'entry/site/orders'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						//console.log(res,'111111')
						if (res.data.code == 200) {
							if(res.data.data == 0){
								that.deliveryFee = res.data.data
							}else{
								that.deliveryFee = res.data.data
							}
						}
						that.paid_fee();
					}
				})
			},
			
			//统计应付款
			paid_fee: function (){
				//单价
				let price = parseFloat(this.data.price);
				//数量
				let num = parseInt(this.quantity);
				//运费
				let delivery = parseFloat(this.deliveryFee);
				//计算应付总价
				let paid_fee = parseFloat((price * num) + delivery).toFixed(2);
				
				this.paidFee = paid_fee
			},
			
			/**
			 * 下单支付
			 */
			 sale: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {};
				if (userInfo) {
					let data = {
						'goods_id' : this.data.id,
						'address_id' : this.address.id,
						'quantity' : this.quantity,
						'sku' : this.sku,
						'remark' : this.remark,
						'action': 'create',
					}
					console.log(data)
					//下单
					let url = ''
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/orders'
						//#endif
						//#ifdef H5
						url = 'entry/site/orders'
						//#endif
					this.util.request({
						url : url,
						data: data,
						method: 'POST',
						
						success: function (res) {
							//console.log(res.data);
							if (res.data.code == 200) {
								//执行成功提示
								uni.showModal({
									title: '提示',
									content: '兑换成功',
									confirmText: '查看订单',
									cancelText: '返回',
									success: function (mdres) {
										if (mdres.confirm) {
											console.log('用户点击确定');
											let order_url = '../my/orders/index'
											uni.redirectTo({
												url: order_url
											});
										} else if (mdres.cancel) {
											console.log('用户点击取消');
											uni.navigateBack()
										}
									}
								});
							}else{
								uni.showToast({
								    title: res.data.msg,
									icon: 'none',
								    duration: 2000
								});
							}
						}
					})
				}else{
					//触发登录框
					that.$refs.login.loginDialog()
				}
			},
			
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {}
				this.userInfo = userInfo
				if (userInfo.sessionid) {
					// 执行父级(更新数据)
					this.$emit('getData')
				}
			},
			handlePrice(price,index){
				return (price || "").split('.')[index];
			},
			processtotal(paidFee,index){
				return(paidFee || "").split('.')[index];
			}
		}
	}
</script>

<style lang="scss">
	.background{
		width: 100%;
		height: 100%;
		background-color:#f5f5f7 ;
	}
	.address-item {
		background-image:repeating-linear-gradient(45deg,
		#5590d6 1px,#5590d6 10px,
		#fbfaf5,10px,#fbfaf5,20px,
		#f25953 20px,#f25953 30px,
		#fbfaf5 30px,#fbfaf5 40px);
		background-size:cover;
		padding:5px 0;
		// margin-top: 23rpx;
		box-sizing:border-box;
		display: flex;
		border-radius: 10rpx;
		.address-default {
			height:80rpx;
			background:#fff;
			padding: 20rpx 23rpx 20rpx 33rpx;
			flex: 1;
			.person-box {
				height: 40rpx;
				line-height: 40rpx;
				.name {
					font-size: 30rpx;
					color: #2d2e2f;
					font-weight: 600;
				}
				.phone {
					color: #2d2e2f;
					font-size: 30rpx;
					padding-left: 20rpx;
					font-size: 600;
				}
			}
			.address-box {
				font-size: 24rpx;
				color: #2d2e2f;
				height: 40rpx;
				line-height: 40rpx;
                font-family: 'PingFangSC-Regular, PingFang SC';
				.pos-province {
					margin-right: 10rpx
				}
				.pos-city {
					margin-right: 10rpx
				}
				.pos_district {
					margin-right: 10rpx
				}
				.address {
					
				}
			}
		}
		
		.address-edit {
			flex: 1;
			font-size: 28rpx;
			height:120rpx;
			line-height: 120rpx;
			text-align: center;
			background:#fbfaf5;
			color: #999;
		}
		.active {
			width: 30rpx;
			height:80rpx;
			line-height: 80rpx;
			background:#fff;
			padding: 20rpx;
		}
	}
	
	.goods-item {
		background-color: #fff;
		margin-top: 24rpx;
		border-radius: 10rpx 10rpx 0 0;
		.content {
			padding: 24rpx 33rpx 10rpx 24rpx;
			display: flex;
			flex-wrap: wrap;
			.cover {
				width: 170rpx;
				height: 170rpx;
				border-radius: 10rpx;
				overflow: hidden;
				.image {
					width: 170rpx;
					height: 170rpx;
					display: block;
				}
			}
			.info {
				padding:12rpx 0 0 33rpx;
				flex: 1;
				.title {
					font-size: 24rpx;
					color: #2d2e2f;
					font-weight: 600;
					line-height: 30rpx;
				}
				.price-info {
					margin-top: 10rpx;
					font-size: 24rpx;
					display: flex;
					.score-icon {
						width: 40rpx;
						color: #f90;
						line-height: 60rpx;
					}
					.price {
						font-size: 38rpx;
						font-weight: 700;
						margin: 0;
						font-family: 'DIN-Medium, DIN';
					}
				}
				.exp-info {
					margin-top: 10rpx;
					color: #999;
					font-size: 24rpx;
				}
			}
		}
	}
	
	.goods-count {
		// margin: 20rpx 0;
		padding: 20rpx 23rpx 20rpx 33rpx;
		display: flex;
		height: 48rpx;
		background-color: #FFFFFF;
		.title {
			flex: 1;
			color: #2d2e2f;
			height: 48rpx;
			font-size: 24rpx;
			line-height: 48rpx;
		}
		.info {
			width: 200rpx;
			.number-box {
				display: flex;
				width: 200rpx;
				.cut-btn {
					width: 58rpx;
					height: 58rpx;
					line-height: 58rpx;
					text-align: center;
					background-color: #f5f5f7;
					// border-radius: 4rpx;
					// border: 2rpx solid #ddd;
					color: #999;
				}
				.add-btn {
					width: 58rpx;
					height: 58rpx;
					line-height: 58rpx;
					text-align: center;
					background-color: #f5f5f7;
					// border-radius: 4rpx;
					// border: 2rpx solid #ddd;
					color: #999;
				}
				.number-input {
					flex: 1;
					width: 92rpx;
					height: 58rpx;
					line-height: 58rpx;
					// border: 2rpx solid #ddd;
					// border-radius: 4rpx;
					text-align: center;
					font-size: 24rpx;
					margin: 0 4rpx;
					background-color: #f5f5f7;
					color: #2d2e2f;
				}
			}
		}
	}
	
	.goods-delivery {
		// margin: 20rpx 0;
		padding: 20rpx 23rpx 20rpx 33rpx;
		display: flex;
		height: 48rpx;
		background-color: #fff;
		.title {
			flex: 1;
			color: #2d2e2f;
			height: 48rpx;
			font-size: 24rpx;
			line-height: 48rpx;
		}
		.info {
			width: 200rpx;
			.value {
				text-align: right;
				color: #2d2e2f;
				font-size: 22rpx;
			}
		}
	}
	
	.remark {
		margin: 20rpx 0;
		padding: 20rpx 23rpx 20rpx 33rpx;
		width: 93%;
		background-color: #fff;
		border-radius: 0 0 10rpx 10rpx;
		.title {
			height: 48rpx;
			color: #2d2e2f;
			font-size: 24rpx;
			line-height: 28rpx;
			font-family: 'PingFangSC-Regular, PingFang SC';
		}
		.info {
			.uni-textarea{
				font-size: 22rpx;
				color: #C0C0C0;
				line-height: 36rpx;
				font-weight: 400;
			}
		}
	}
	
	.clearArea{
		display: block;
		background-color: #f5f5f7;
		height: 300rpx;
	}
	.pay-bar {
		// padding: 20rpx 24rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 90rpx;
		background-color: #fff;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		.amount{
			display: inline-block;
			width: 66%;
			// height: 50rpx;
			line-height: 90rpx;
			margin-left: 32rpx;
			font-size: 24rpx;
			font-family: 'PingFangSC-Regular, PingFang SC';
			font-weight: 600;
			color: #2D2E2F;
			.price-info {
				margin-top: 10rpx;
				font-size: 24rpx;
				display: flex;
				.score-icon {
					width: 40rpx;
					color: #f90;
					line-height: 60rpx;
				}
				.price {
					font-size: 38rpx;
					font-weight: 700;
					margin: 0;
					font-family: 'DIN-Medium, DIN';
				}
			}
			.total{
				display: inline-block;
				width: 60rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}
		}
		.pay-btn {
			display: inline-block;
			width:203rpx;
			height: 70rpx;
			border-radius: 45rpx;
			color: #fff;
			line-height:70rpx ;
			font-size:24rpx ;
			font-family: 'PingFangSC-Medium, PingFang SC';
			font-weight:600;
			margin: 10rpx 0;
			vertical-align:top;
		}
		.pay-btn-hover {
			
		}
	}
	
	/*页面风格设计*/
	.Blue {
		.goods-item {
			.price {
				color: $Blue;
			}
		}
		.total {
			color: $Blue;
		}
		.pay-bar {
			.pay-btn {
				background-color: $Blue;
			}
			.pay-btn-hover {
				background-color: $Blue-hover;
			}
		}
	}
	.Green {
		.goods-item {
			.price {
				color: $Green;
			}
		}
		.total {
			color: $Green;
		}
		.pay-bar {
			.pay-btn {
				background-color: $Green;
			}
			.pay-btn-hover {
				background-color: $Green-hover;
			}
		}
	}
	.LightRed {
		.goods-item {
			.price {
				color: $LightRed;
			}
		}
		.total {
			color: $LightRed;
		}
		.pay-bar {
			.pay-btn {
				background-color: $LightRed;
			}
			.pay-btn-hover {
				background-color: $LightRed-hover;
			}
		}
	}
	.Orange {
		.goods-item {
			.price {
				color: $Orange;
			}
		}
		.total {
			color: $Orange;
		}
		.pay-bar {
			.pay-btn {
				background-color: $Orange;
			}
			.pay-btn-hover {
				background-color: $Orange-hover;
			}
		}
	}
	.LightPink {
		.goods-item {
			.price {
				color: $LightPink;
			}
		}
		.total {
			color: $LightPink;
		}
		.pay-bar {
			.pay-btn {
				background-color: $LightPink;
			}
			.pay-btn-hover {
				background-color: $LightPink-hover;
			}
		}
	}
	.Magenta {
		.goods-item {
			.price {
				color: $Magenta;
			}
		}
		.total {
			color: $Magenta;
		}
		.pay-bar {
			.pay-btn {
				background-color: $Magenta;
			}
			.pay-btn-hover {
				background-color: $Magenta-hover;
			}
		}
	}
</style>
